<template>
  <div class="boxrech">
    <!-- 头部 -->
    <div class="hearde">
      <div
        @click="$router.go(-1)"
        class="iconfont icon-arrowRight-copy-copy"
      ></div>
      <div class="text">充值</div>
    </div>
    <!-- 账号 -->
    <div class="account">
      <div class="text">充值账号</div>
      <div class="name">江户川胡芦娃</div>
    </div>
    <!-- 选择支付 -->
    <div v-show="fase == 5" class="choice">
      <div
        v-for="item in choice"
        :key="item.id"
        @click="fase = item.id"
        class="item"
      >
        <svg class="icon" aria-hidden="true">
          <use :xlink:href="item.svg"></use>
        </svg>
        <div :class="item.id == 4 ? 'con' : ''">{{ item.name }}</div>
      </div>
    </div>
    <div v-for="item in choice" :key="item.id" v-show="fase == item.id">
      <!-- 支付app -->
      <div class="rechapp">
        <div class="redch">
          <div class="item">
            <svg class="icon" aria-hidden="true">
              <use :xlink:href="item.svg"></use>
            </svg>
            <div>
              <span>{{ item.name }}</span>
              <span
                @click="fase = 5"
                class="iconfont icon-arrowRight-copy-copy-copy"
              ></span>
            </div>
          </div>
        </div>
      </div>
      <!-- 支付金额 -->
      <div class="rechlen">
        <ul>
          <li
            v-for="(item, index) in reclists"
            :key="index"
            @click="num = item.rec,nums = ''"
          >
            <div class="left">{{ item.rec * 1000 }} 起点币</div>
            <div class="right">
              <span>￥{{ item.rec / 0.1 }}</span>
              <div>
                <span
                  v-show="num == item.rec"
                  class="iconfont icon-tick"
                ></span>
              </div>
            </div>
          </li>
          <li class="con">
            <div class="left">{{ nums * 100 }} 起点币</div>
            <input
              v-model="nums"
              @input="inputadd"
              @click="num = 0"
              class="lbf-text-input"
              type="tel"
              value=""
              hidefocus="true"
              maxlength="5"
              placeholder="输入自定义金额"
            />
          </li>
        </ul>
      </div>
      <!-- 确认支付 -->
      <div class="confirm">
        <div
          @click="add"
          :class="check ? (num == 0 ? 'confs' : 'conf') : 'confs'"
          :style="
            check
              ? nums > 0
                ? { 'background-color': '#2e9de7' }
                : ''
              : 'confs'
          "
        >
          立即支付
          <span v-show="num > 0 || nums > 0"
            >￥{{ num * 10 || nums }}</span
          >
        </div>
        <div class="conbox">
          <input
            v-model="check"
            type="checkbox"
            name="vehicle"
            value="Car"
            checked="checked"
          /><span>我同意 《用户服务协议》</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { Toast } from "vant";
export default {
  data() {
    return {
      fase: 5, //判断支付
      num: 0, //选择价格
      nums: "", //自定义价格
      reclists: [
        {
          rec: 1,
        },
        {
          rec: 2,
        },
        {
          rec: 3,
        },
        {
          rec: 5,
        },
        {
          rec: 10,
        },
      ], //价格列表
      check: false, //判断是否勾选用户协议
      choice: [
        {
          id: 1,
          name: "支付宝",
          svg: "#icon-zhifubao",
        },
        {
          id: 2,
          name: "微信",
          svg: "#icon-weixin",
        },
        {
          id: 3,
          name: "QQ钱包",
          svg: "#icon-QQ1",
        },
        {
          id: 4,
          name: "PayPal",
          svg: "#icon-social-_round-paypal-copy",
        },
      ], //支付列表
      currency:0,//起点币
    };
  },
  methods: {
    add() {
      if ((this.num > 0 || this.nums > 0) && this.check) {
        if (this.nums) {
          this.currency = window.localStorage.getItem("currency");
          let currency =  parseInt(this.nums * 1000) + parseInt(this.currency);
          window.localStorage.setItem("currency", currency);
          console.log(currency,parseInt(this.nums * 100));
          Toast("充值成功");
          this.$router.go(-1)
        } else if(!this.num == 0){
          this.currency = window.localStorage.getItem("currency");
          let currency = parseInt(this.num * 1000) + parseInt(this.currency); 
          window.localStorage.setItem("currency", currency);
          Toast("充值成功");
          this.$router.go(-1)
        }
      }
    },
    inputadd() {
      console.log(this.nums);
      let numberjudge =
        /(?:^[1-9]([0-9]+)?(?:\.[0-9]{1,2})?$)|(?:^(?:0)$)|(?:^[0-9]\.[0-9](?:[0-9])?$)/;
      if (!numberjudge.test(this.nums)) {
        this.nums = "";
        return;
      }
    },
  },
  created(){
    
  },
  watch: {},
};
</script>

<style lang="less">
.boxrech {
  .hearde {
    width: 100%;
    background-color: #fafafa;
    padding: 12px 0px;
    display: flex;
    position: relative;
    margin-bottom: 12px;
    .icon-arrowRight-copy-copy {
      position: absolute;
      font-size: 19px;
      color: #007eff;
      padding: 0px 15px;
    }
    .text {
      width: 100%;
      text-align: center;
      font-size: 14px;
      color: #3d4145;
    }
  }
  .account {
    width: calc(100% - 30px);
    background-color: white;
    padding: 12px 15px;
    display: flex;
    align-items: center;
    font-size: 14px;
    justify-content: space-between;
    color: #3d4145;
    margin-bottom: 12px;
  }
  .choice {
    width: 100%;
    background-color: white;
    .item {
      display: flex;
      align-items: center;
      div {
        width: calc(100% - 49px);
        padding: 18px 0px;
        font-size: 14px;
        color: #111111;
        border-bottom: 1px solid #e6e6e6;
      }
      .con {
        border-bottom: 0px;
      }
      svg {
        width: 32px;
        height: 32px;
        padding: 0px 15px;
      }
    }
  }
  .rechapp {
    width: 100%;
    margin-bottom: 25px;
    .redch {
      width: 100%;
      background-color: white;
      .item {
        display: flex;
        align-items: center;
        div {
          width: calc(100% - 49px);
          display: flex;
          justify-content: space-between;
          padding: 18px 0px;
          font-size: 14px;
          color: #111111;
          span {
            padding-right: 12px;
          }
        }
        svg {
          width: 32px;
          height: 32px;
          padding: 0px 15px;
        }
      }
    }
  }
  .rechlen {
    width: 100%;
    background-color: white;
    margin-bottom: 20px;
    ul {
      li {
        width: calc(100% - 15px);
        padding: 18px 0px;
        margin-left: 15px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        border-bottom: 1px solid #efefef;
        .left,
        .right {
          font-size: 14px;
          color: #3d4145;
        }
        .right {
          display: flex;
          div {
            text-align: center;
            width: 44px;
            color: #42a6ea;
          }
          .icon-dagou1 {
            font-size: 16px;
          }
        }
      }
      .con {
        border-bottom: 0;
        display: flex;
        justify-content: space-between;
        .lbf-text-input {
          border: 0px;
          text-align: right;
          margin-right: 44px;
          font-size: 14px;
        }
        .lbf-text-input::-webkit-input-placeholder {
          color: rgb(209, 208, 208);
          font-size: 14px;
        }
      }
    }
  }
  .confirm {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    .conf {
      font-size: 14px;
      padding: 10px 0px;
      width: 345px;
      text-align: center;
      color: white;
      background-color: #2e9de7;
      border-radius: 3px;
      margin-bottom: 12px;
    }
    .confs {
      font-size: 14px;
      padding: 10px 0px;
      width: 345px;
      text-align: center;
      color: white;
      background-color: #2e9de773;
      border-radius: 3px;
      margin-bottom: 12px;
    }
    .conbox {
      font-size: 12px;
      color: #111111;
      display: flex;
      align-items: center;
    }
  }
}
</style>